{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '动画示例'])}
<style>
    /* 图标动画 */
    .animations-box .badge {
        position: absolute;
        top: -10px;
        left: 12px;
        border-radius: 50%;
        box-shadow: 0 0 0 rgba(var(--bs-danger-rgb), 0.9);
        animation: pulse-danger 2s infinite;
    }
    .dot {
        display: block;
        position: absolute;
        top: -0.5rem;
        right: -0.1rem;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c03c;
        cursor: pointer;
        box-shadow: 0 0 0 rgba(var(--bs-success-rgb), 0.9);
        animation: pulse-success 2s infinite;
    }
    @-webkit-keyframes pulse-success {
        0% {
            -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.9);
        }
        70% {
            -webkit-box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0);
        }
        100% {
            -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
        }
    }
    @keyframes pulse-success {
        0% {
            -moz-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.9);
            box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.7);
        }
        70% {
            -moz-box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0);
            box-shadow: 0 0 0 10px rgba(var(--bs-success-rgb), 0);
        }
        100% {
            -moz-box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
            box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
        }
    }
    @-webkit-keyframes pulse-danger {
        0% {
            -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.9);
        }
        70% {
            -webkit-box-shadow: 0 0 0 10px rgba(var(--bs-danger-rgb), 0);
        }
        100% {
            -webkit-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
        }
    }
    @keyframes pulse-danger {
        0% {
            -moz-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.9);
            box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.7);
        }
        70% {
            -moz-box-shadow: 0 0 0 10px rgba(var(--bs-danger-rgb), 0);
            box-shadow: 0 0 0 10px rgba(var(--bs-danger-rgb), 0);
        }
        100% {
            -moz-box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
            box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
        }
    }
    .bell-animations {
        display: inline-block;
        -webkit-animation: ring 4s .7s ease-in-out infinite;
        -webkit-transform-origin: 50% 4px;
        -moz-animation: ring 4s .7s ease-in-out infinite;
        -moz-transform-origin: 50% 4px;
        animation: ring 4s .7s ease-in-out infinite;
        transform-origin: 50% 4px;
    }
    @-webkit-keyframes ring {
        0% { -webkit-transform: rotateZ(0); }
        1% { -webkit-transform: rotateZ(30deg); }
        3% { -webkit-transform: rotateZ(-28deg); }
        5% { -webkit-transform: rotateZ(34deg); }
        7% { -webkit-transform: rotateZ(-32deg); }
        9% { -webkit-transform: rotateZ(30deg); }
        11% { -webkit-transform: rotateZ(-28deg); }
        13% { -webkit-transform: rotateZ(26deg); }
        15% { -webkit-transform: rotateZ(-24deg); }
        17% { -webkit-transform: rotateZ(22deg); }
        19% { -webkit-transform: rotateZ(-20deg); }
        21% { -webkit-transform: rotateZ(18deg); }
        23% { -webkit-transform: rotateZ(-16deg); }
        25% { -webkit-transform: rotateZ(14deg); }
        27% { -webkit-transform: rotateZ(-12deg); }
        29% { -webkit-transform: rotateZ(10deg); }
        31% { -webkit-transform: rotateZ(-8deg); }
        33% { -webkit-transform: rotateZ(6deg); }
        35% { -webkit-transform: rotateZ(-4deg); }
        37% { -webkit-transform: rotateZ(2deg); }
        39% { -webkit-transform: rotateZ(-1deg); }
        41% { -webkit-transform: rotateZ(1deg); }
        43% { -webkit-transform: rotateZ(0); }
        100% { -webkit-transform: rotateZ(0); }
    }
    /* 背景动画 */
    .wave {
        background-color: #f9fafb;
        overflow: hidden;
        position: relative;
    }
    .wave > div {
        z-index: 1;
    }
    .wave:before {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ffffff;
        z-index: -1;
    }
    .wave:after {
        content: ' ';
        width: 1000px;
        height: 1025px;
        position: absolute;
        bottom: 65%;
        left: -250px;
        border-radius: 35%;
        background: white;
        z-index: 0;
    }
    .wave:after {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .wave-animate:after {
        -webkit-animation: animate-wave 15s infinite linear;
        animation: animate-wave 15s infinite linear;
    }
    .wave-animate-slower:after {
        -webkit-animation: animate-wave 30s infinite linear;
        animation: animate-wave 30s infinite linear;
    }
    .wave-animate-slow:after {
        -webkit-animation: animate-wave 25s infinite linear;
        animation: animate-wave 25s infinite linear;
    }
    .wave-animate-fast:after {
        -webkit-animation: animate-wave 10s infinite linear;
        animation: animate-wave 10s infinite linear;
    }
    .wave-animate-faster:after {
        -webkit-animation: animate-wave 5s infinite linear;
        animation: animate-wave 5s infinite linear;
    }
    .wave.wave-primary {
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    }
    .wave.wave-primary .svg-icon svg g [fill] {
        fill: var(--bs-primary);
    }
    .wave.wave-secondary {
        background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
    }
    .wave.wave-secondary .svg-icon svg g [fill] {
        fill: var(--bs-secondary);
    }
    .wave.wave-success {
        background-color: rgba(var(--bs-success-rgb), 0.1) !important;
    }
    .wave.wave-success .svg-icon svg g [fill] {
        fill: var(--bs-success);
    }
    .wave.wave-info {
        background-color: rgba(var(--bs-info-rgb), 0.1) !important;
    }
    .wave.wave-info .svg-icon svg g [fill] {
        fill: var(--bs-info);
    }
    .wave.wave-warning {
      background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
    }
    .wave.wave-warning .svg-icon svg g [fill] {
        fill: var(--bs-warning);
    }
    .wave.wave-danger {
        background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
    }
    .wave.wave-danger .svg-icon svg g [fill] {
        fill: var(--bs-danger);
    }
    .wave.wave-light {
        background-color: rgba(var(--bs-light-rgb), 0.1) !important;
    }
    .wave.wave-light .svg-icon svg g [fill] {
        fill: var(--bs-light);
    }
    .wave.wave-dark {
        background-color: rgba(var(--bs-dark-rgb), 0.1) !important;
    }
    .wave.wave-dark .svg-icon svg g [fill] {
        fill: var(--bs-dark);
    }
    .wave.wave-white {
        background-color: rgba(var(--bs-white-rgb), 0.1) !important;
    }
    .wave.wave-white .svg-icon svg g [fill] {
        fill: var(--bs-white);
    }
    @-webkit-keyframes animate-wave {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg); }
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes animate-wave {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    /* 动画css库演示 */
    #myTabContent li {
        margin: 10px 10px 0 0;
        padding: 5px 10px;
        background-color: #eee;
        cursor: pointer;
    }
    #myTabContent li.active {
        color: var(--bs-primary);
    }
    </style>
    
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header"><div class="card-title">图标动画</div></div>
          <div class="card-body">
            
            <span class="position-relative animations-box">
              <i class="mdi mdi-message-text-outline fs-4"></i>
              <span class="badge bg-danger badge-pill">3</span>
            </span>
            <br/>
            <span class="position-relative animations-box">
              <i class="mdi mdi-bell fs-4"></i>
              <span class="dot bg-success"></span>
            </span>
            <br/>
            <span class="position-relative animations-box">
              <i class="mdi mdi-bell bell-animations fs-4"></i>
              <span class="dot bg-success"></span>
            </span>
            
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="col-md-4">
        <!--begin::Iconbox-->
        <div class="card wave wave-animate-slow wave-primary">
          <div class="card-body position-relative">
            <a href="#!" class="text-dark fs-4">第四十九回</a>
            <div class="mt-2 mb-2">薛招讨大破围城将 盖苏文失计飞刀阵</div>
            <p>诗曰：枉去扶余借救兵，苏文难获大唐君。飞刀失去雄师丧，天意谁能谋得成。</p>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="card wave wave-animate wave-danger">
          <div class="card-body position-relative">
            <a href="#!" class="text-dark fs-4">第五十回</a>
            <div class="mt-2 mb-2">扶余国二次借兵 朱皮仙播弄神通</div>
            <p>诗曰：苏文几次上仙山，再炼飞刀又设坛。怎奈唐王洪福大，机谋枉用也徒然。</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card wave wave-animate-fast wave-info">
          <div class="card-body position-relative">
            <a href="#!" class="text-dark fs-4">第五十一回</a>
            <div class="mt-2 mb-2">香山弟子除妖法 唐国元戎演阵图</div>
            <p>诗曰：龟灵妖法仗红珠，千载精华功不殊。指望威名成海国，那知一旦露形躯。</p>
          </div>
        </div>
      </div>
      
    </div>
    
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header"><div class="card-title">动画样式示例</div></div>
          <div class="card-body">
            
            <p>模板中的样式文件 <code>animate.css</code> 是一个随时可用的跨浏览器动画库，供您在项目中使用。这里单独对改文件的动画做个示例。新版的这个 <code>css</code> 里面，所有的 <code>class</code> 都带上了<code>animate__</code>，这个跟以前的有区别，大家用的时候注意一下</p>
            <div class="text-center my-3"><h2 id="animate">Animate.css</h2></div>
            <ul id="myTabs" class="nav nav-tabs" role="tablist">
              <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#attention-seekers">Attention Seekers</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#bouncing-entrances">Bouncing Entrances</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#bouncing-exits">Bouncing Exits</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#fading-entrances">Fading Entrances</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#fading-exits">Fading Exits</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#flippers">Flippers</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#lightspeed">Lightspeed</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#rotating-entrances">Rotating Entrances</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#rotating-exits">Rotating Exits</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sliders">Sliders</a></li>
              <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#specials">Specials</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade show active" id="attention-seekers">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__bounce</li>
                  <li class="list-inline-item">animate__flash</li>
                  <li class="list-inline-item">animate__pulse</li>
                  <li class="list-inline-item">animate__rubberBand</li>
                  <li class="list-inline-item">animate__shake</li>
                  <li class="list-inline-item">animate__swing</li>
                  <li class="list-inline-item">animate__tada</li>
                  <li class="list-inline-item">animate__wobble</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="bouncing-entrances">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__bounceIn</li>
                  <li class="list-inline-item">animate__bounceInDown</li>
                  <li class="list-inline-item">animate__bounceInLeft</li>
                  <li class="list-inline-item">animate__bounceInRight</li>
                  <li class="list-inline-item">animate__bounceInUp</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="bouncing-exits">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__bounceOut</li>
                  <li class="list-inline-item">animate__bounceOutDown</li>
                  <li class="list-inline-item">animate__bounceOutLeft</li>
                  <li class="list-inline-item">animate__bounceOutRight</li>
                  <li class="list-inline-item">animate__bounceOutUp</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="fading-entrances">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__fadeIn</li>
                  <li class="list-inline-item">animate__fadeInDown</li>
                  <li class="list-inline-item">animate__fadeInDownBig</li>
                  <li class="list-inline-item">animate__fadeInLeft</li>
                  <li class="list-inline-item">animate__fadeInLeftBig</li>
                  <li class="list-inline-item">animate__fadeInRight</li>
                  <li class="list-inline-item">animate__fadeInRightBig</li>
                  <li class="list-inline-item">animate__fadeInUp</li>
                  <li class="list-inline-item">animate__fadeInUpBig</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="fading-exits">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__fadeOut</li>
                  <li class="list-inline-item">animate__fadeOutDown</li>
                  <li class="list-inline-item">animate__fadeOutDownBig</li>
                  <li class="list-inline-item">animate__fadeOutLeft</li>
                  <li class="list-inline-item">animate__fadeOutLeftBig</li>
                  <li class="list-inline-item">animate__fadeOutRight</li>
                  <li class="list-inline-item">animate__fadeOutRightBig</li>
                  <li class="list-inline-item">animate__fadeOutUp</li>
                  <li class="list-inline-item">animate__fadeOutUpBig</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="flippers">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__flip</li>
                  <li class="list-inline-item">animate__flipInX</li>
                  <li class="list-inline-item">animate__flipInY</li>
                  <li class="list-inline-item">animate__flipOutX</li>
                  <li class="list-inline-item">animate__flipOutY</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="lightspeed">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__lightSpeedIn</li>
                  <li class="list-inline-item">animate__lightSpeedOut</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="rotating-entrances">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__rotateIn</li>
                  <li class="list-inline-item">animate__rotateInDownLeft</li>
                  <li class="list-inline-item">animate__rotateInDownRight</li>
                  <li class="list-inline-item">animate__rotateInUpLeft</li>
                  <li class="list-inline-item">animate__rotateInUpRight</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="rotating-exits">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__rotateOut</li>
                  <li class="list-inline-item">animate__rotateOutDownLeft</li>
                  <li class="list-inline-item">animate__rotateOutDownRight</li>
                  <li class="list-inline-item">animate__rotateOutUpLeft</li>
                  <li class="list-inline-item">animate__rotateOutUpRight</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="sliders">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__slideInDown</li>
                  <li class="list-inline-item">animate__slideInLeft</li>
                  <li class="list-inline-item">animate__slideInRight</li>
                  <li class="list-inline-item">animate__slideOutLeft</li>
                  <li class="list-inline-item">animate__slideOutRight</li>
                  <li class="list-inline-item">animate__slideOutUp</li>
                </ul>
              </div>
              <div class="tab-pane fade" id="specials">
                <ul class="list-inline">
                  <li class="list-inline-item">animate__hinge</li>
                  <li class="list-inline-item">animate__rollIn</li>
                  <li class="list-inline-item">animate__rollOut</li>
                </ul>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
        $(function(){
            var $animate = $('#animate');
            var $btn = $('#myTabContent').find('li');
            $btn.click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                $animate.removeClass().addClass($(this).text() + ' animate__animated animate__infinite');
                setTimeout(removeClass, 1000);
            });
        
            function removeClass(){
                $animate.removeClass();
            }
        });
        </script>